2025年9月8日中文

解锁复杂的、方向敏感的网页动画。本指南探讨如何使用现代 CSS 和一个极简的 JavaScript 辅助工具来检测滚动方向，以实现高性能的滚动驱动用户界面。

CSS 滚动方向检测：深入探讨方向感知动画

网络世界正处于不断发展的状态。多年来，创建响应用户滚动位置的动画一直是 JavaScript 的专属领域。像 GSAP 这样的库和自定义的 Intersection Observer 设置是主流工具，要求开发人员编写在主线程上运行的复杂命令式代码。虽然功能强大，但这种方法通常伴随着性能成本，可能导致卡顿和不够流畅的用户体验。

进入网页动画的新纪元：CSS 滚动驱动动画。这一突破性的规范允许开发人员将动画的进度直接链接到容器的滚动位置，并且完全在 CSS 中以声明方式完成。这将复杂的动画逻辑从主线程中移出，带来了以前难以实现的如丝般顺滑、高性能的效果。

然而，一个关键问题常常出现：我们能否让这些动画对滚动的方向敏感？一个元素能否在用户向下滚动时以一种方式进行动画，而在向上滚动时以另一种方式进行动画？本指南将提供全面的解答，探讨现代 CSS 的能力、其目前的局限性，以及创建令人惊叹的方向感知用户界面的最佳实践和全球化解决方案。

旧世界：使用 JavaScript 检测滚动方向

在我们深入探讨现代 CSS 方法之前，了解传统方法会很有帮助。十多年来，检测滚动方向一直是一个经典的 JavaScript 问题。逻辑很简单：监听滚动事件，将当前的滚动位置与前一个位置进行比较，然后确定方向。

一个典型的 JavaScript 实现

一个简单的实现可能如下所示：

            // Store the last scroll position globally
let lastScrollY = window.scrollY;

window.addEventListener('scroll', () => {
  const currentScrollY = window.scrollY;

  if (currentScrollY > lastScrollY) {
    // Scrolling down
    document.body.setAttribute('data-scroll-direction', 'down');
  } else {
    // Scrolling up
    document.body.setAttribute('data-scroll-direction', 'up');
  }

  // Update the last scroll position for the next event
  lastScrollY = currentScrollY;
});

在此脚本中，我们为窗口的滚动事件附加了一个事件监听器。在处理函数内部，我们检查新的垂直滚动位置（`currentScrollY`）是否大于上一个已知位置（`lastScrollY`）。如果是，则表示我们正在向下滚动；否则，我们正在向上滚动。然后，我们通常会在 `` 元素上设置一个 data 属性，CSS 可以将其用作钩子来应用不同的样式或动画。

重度依赖 JavaScript 方法的局限性

性能开销： `scroll` 事件每秒可能触发数十次。直接将复杂的逻辑或 DOM 操作附加到它上面可能会阻塞主线程，导致卡顿和抖动，尤其是在低性能设备上。
复杂性： 虽然核心逻辑很简单，但管理动画状态、为性能处理防抖或节流以及确保清理工作都会给代码库增加相当大的复杂性。
关注点分离： 动画逻辑与应用程序逻辑在 JavaScript 中交织在一起，模糊了行为和表现之间的界限。理想情况下，视觉样式和动画应该存在于 CSS 中。

新范式：CSS 滚动驱动动画

CSS 滚动驱动动画规范从根本上改变了我们对基于滚动的交互的看法。它提供了一种声明式的方式，通过将 CSS 动画链接到一个滚动时间轴来控制其进度。

这个新 API 核心的两个关键属性是：

animation-timeline：此属性为动画分配一个命名的时间轴，有效地将其与默认的基于文档的时间进程分离。
scroll-timeline-name 和 scroll-timeline-axis：这些属性（应用于可滚动元素）创建并命名一个滚动时间轴，其他元素可以引用该时间轴。

最近，出现了一种强大的简写方式，通过直接在 `animation-timeline` 属性中使用 `scroll()` 和 `view()` 函数，极大地简化了这一过程。

理解 `scroll()` 和 `view()` 函数

scroll()：滚动进度时间轴

`scroll()` 函数基于容器（滚动器）的滚动进度创建一个匿名时间轴。与此时间轴链接的动画将随着滚动器从其初始滚动位置移动到其最大滚动位置而从 0% 进展到 100%。

一个经典的例子是文章顶部的阅读进度条：

            /* CSS */
#progress-bar {
  transform-origin: 0 50%;
  animation: grow-progress linear;
  animation-timeline: scroll(root block);
}

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

在这个例子中，`grow-progress` 动画直接与整个文档（`root`）沿其垂直（`block`）轴的滚动位置绑定。更新进度条的宽度不需要任何 JavaScript。

view()：视图进度时间轴

`view()` 函数功能更加强大。它基于一个元素在其滚动器视口中的可见性来创建一个时间轴。当元素进入、穿过和退出视口时，动画会随之进行。

这非常适合当元素滚动进入视图时创建淡入效果：

            /* CSS */
.fade-in-element {
  opacity: 0;
  animation: fade-in linear forwards;
  animation-timeline: view();
  animation-range-start: entry 0%;
  animation-range-end: entry 40%;
}

@keyframes fade-in {
  to { opacity: 1; }
}

在这里，当元素开始进入视口时（`entry 0%`），`fade-in` 动画开始，并在其进入视口 40% 的位置时（`entry 40%`）完成。`forwards` 填充模式确保了在动画完成后它仍然保持可见。

核心挑战：纯 CSS 如何检测滚动方向？

有了这个强大的新背景，我们回到最初的问题：我们如何检测滚动的方向？

简短而直接的答案是：根据目前的规范，没有原生的 CSS 属性、函数或伪类可以直接检测滚动方向。

这可能看起来是一个重大的疏漏，但其根源在于 CSS 的声明性本质。CSS 被设计用来描述文档的状态，而不是跟踪状态随时间的变化。确定方向需要知道先前的状态（最后的滚动位置）并将其与当前状态进行比较。这种类型的状态逻辑从根本上说是 JavaScript 的设计初衷。

一个假设的 `scrolling-up` 伪类或 `scroll-direction()` 函数将要求 CSS 引擎为每个元素维护一个滚动位置的历史记录，这会增加相当大的复杂性和潜在的性能开销，违背了 CSS 的核心设计原则。

那么，如果纯 CSS 无法做到，我们是否又回到了原点？完全不是。我们现在可以采用一种高度优化的现代混合方法，结合两者的优点。

务实且高性能的解决方案：一个极简的 JS 辅助工具

最有效且被广泛接受的解决方案是使用一个微小、高性能的 JavaScript 片段来完成它最擅长的任务——状态检测——并将所有动画的繁重工作留给 CSS。

我们将使用与旧 JavaScript 方法相同的逻辑原理，但我们的目标不同。我们不是在 JavaScript 中运行动画。我们只是简单地切换一个 CSS 将用作钩子的属性。

第一步：JavaScript 状态检测器

创建一个小而高效的脚本来跟踪滚动方向，并更新 `` 或相关滚动容器上的 `data-` 属性。

            let lastScrollTop = window.pageYOffset || document.documentElement.scrollTop;

// A function that's optimized to run on each scroll
const storeScroll = () => {
    const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
    if (currentScrollTop > lastScrollTop) {
        // Downscroll
        document.body.setAttribute('data-scroll-direction', 'down');
    } else {
        // Upscroll
        document.body.setAttribute('data-scroll-direction', 'up');
    }
    lastScrollTop = currentScrollTop <= 0 ? 0 : currentScrollTop; // For Mobile or negative scrolling
}

// Listen for scroll events
window.addEventListener('scroll', storeScroll, { passive: true });

// Initial call to set direction on page load
storeScroll();

这个现代脚本中的关键改进：

{ passive: true }：我们告诉浏览器我们的滚动监听器不会调用 `preventDefault()`。这是一个至关重要的性能优化，因为它允许浏览器立即处理滚动，而无需等待我们的脚本执行完毕，从而防止滚动卡顿。
data-attribute：使用 `data-scroll-direction` 是一种在 DOM 中存储状态的干净、语义化的方式，不会干扰类名或 ID。
极简逻辑：该脚本只做一件事：比较两个数字并设置一个属性。所有动画逻辑都交给了 CSS。

第二步：方向感知的 CSS 动画

现在，在我们的 CSS 中，我们可以使用属性选择器根据滚动方向应用不同的样式或动画。

让我们构建一个常见的 UI 模式：一个在您向下滚动时隐藏以最大化屏幕空间，但在您开始向上滚动时立即重新出现以便快速访问导航的页眉。

HTML 结构

            <body>
  <header class="main-header">
    <h1>My Website</h1>
    <nav>...</nav>
  </header>

  <main>
    <!-- A lot of content to make the page scrollable -->
  </main>
</body>

CSS 的魔力

            .main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transform: translateY(0%);
  transition: transform 0.4s ease-in-out;
}

/* When scrolling down, hide the header */
body[data-scroll-direction="down"] .main-header {
  transform: translateY(-100%);
}

/* When scrolling up, show the header */
body[data-scroll-direction="up"] .main-header {
  transform: translateY(0%);
}

/* Optional: Keep header visible at the very top of the page */
/* This requires a little more JS to add a class when scrollTop is 0 */
body.at-top .main-header {
  transform: translateY(0%);
}

在这个例子中，我们用几乎没有 JavaScript 的代码实现了一个复杂的、方向感知的动画。CSS 代码干净、声明式且易于理解。浏览器的合成器可以优化 `transform` 属性，确保动画在主线程之外平滑运行。

这种混合方法是当前全球的最佳实践。它清晰地分离了关注点：JavaScript 处理状态，CSS 处理表现。其结果是代码性能高、可维护性强，并且易于国际团队协作。

面向全球受众的最佳实践

在实现滚动驱动的动画时，特别是那些对方向敏感的动画，考虑全球范围内各种用户和设备至关重要。

1. 使用 `prefers-reduced-motion` 优先考虑可访问性

一些用户会经历晕动症或前庭功能障碍，大规模的动画可能会让他们感到迷失方向甚至有害。请始终尊重用户系统级的减弱动态效果偏好。

            @media (prefers-reduced-motion: reduce) {
  .main-header {
    /* Disable the transition for users who prefer less motion */
    transition: none;
  }

  /* Or you can opt for a subtle fade instead of a slide */
  body[data-scroll-direction="down"] .main-header {
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  body[data-scroll-direction="up"] .main-header {
    opacity: 1;
    transition: opacity 0.4s ease;
  }
}

2. 确保跨浏览器兼容性和渐进增强

CSS 滚动驱动动画是一项新技术。虽然所有主流常青浏览器的支持正在迅速增长，但尚未普及。使用 `@supports` 规则来确保您的动画仅在理解它们的浏览器中应用，为其他浏览器提供稳定、备用的体验。

            /* Default styles for all browsers */
.fade-in-on-scroll {
  opacity: 1; /* Visible by default if animations aren't supported */
}

/* Apply scroll-driven animations only if the browser supports them */
@supports (animation-timeline: view()) {
  .fade-in-on-scroll {
    opacity: 0;
    animation: fade-in linear forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }
}

@keyframes fade-in {
  to { opacity: 1; }
}

3. 从全球规模思考性能问题

虽然 CSS 动画比基于 JavaScript 的动画性能要好得多，但每一个决定都会产生影响，特别是对于使用低端设备或慢速网络的用户。

为低成本属性添加动画： 尽可能坚持为 `transform` 和 `opacity` 添加动画。这些属性可以由浏览器的合成器处理，这意味着它们不会触发昂贵的布局重新计算或重绘。避免在滚动时为 `width`、`height`、`margin` 或 `padding` 等属性添加动画。
保持 JavaScript 精简： 我们的方向检测脚本已经很小了，但要时刻注意不要向滚动事件监听器添加更多逻辑。每一毫秒都很重要。
避免过度动画： 仅仅因为您可以在滚动时为所有东西添加动画，并不意味着您应该这样做。有目的地使用滚动驱动效果来增强用户体验、引导注意力并提供反馈——而不仅仅是为了装饰。微妙的效果通常比戏剧性的、充满屏幕的动态效果更有效。

结论：未来是混合模式的

随着 CSS 滚动驱动动画的引入，网页动画的世界取得了巨大的飞跃。我们现在可以用比以前少得多的代码和复杂性来创建极其丰富、高性能和交互式的体验。

虽然纯 CSS 目前还无法检测用户滚动的方向，但这并非规范的失败。它反映了一种成熟且明确的关注点分离。最优解决方案——将 CSS 的声明式动画引擎与 JavaScript 的极简状态跟踪能力强大地结合起来——代表了现代前端开发的巅峰。

通过采用这种混合方法，您可以：

构建速度极快的用户界面： 将动画工作从主线程中卸载，以获得更流畅的用户体验。
编写更清晰的代码： 将表现逻辑保留在 CSS 中，行为逻辑保留在 JavaScript 中。
创建复杂的交互： 轻松构建方向感知的组件，如自动隐藏的页眉、交互式叙事元素等。

当您开始将这些技术整合到您的工作中时，请记住可访问性、性能和渐进增强的全球最佳实践。这样做，您将构建出不仅美观、引人入胜，而且对于全球受众来说具有包容性和弹性的网络体验。